<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='编辑个人资料 | ' + ${titleSuffix},pageKey=${pageKey},pageDesc=${pageDesc})" />
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="layout-top-nav skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::main-header">
            </header>
            <!-- Full Width Column -->
            <div class="content-wrapper">
                <div class="container">
                    <!-- Main content -->
                    <section class="content">
                        <!-- /.box -->

                        <div class="col-md-9" id="app-create-topics">
                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <h4 class="box-title ">请保持友善，分享美好的事物。</h4>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <form role="form">
                                        <!-- text input -->
                                        <div class="form-group">
                                            <!--<input type="text" class="form-control" placeholder="请选择分类">-->
                                            <select class="form-control category" v-model="form.field.category">
                                                <option disabled value="">请选择分类</option>
                                                <option v-for="category in form.categories" v-bind:value="category.var">{{category.title}}</option>
                                            </select>
                                            <template v-if="form.error.category"><span class="text-danger" >{{form.error.category}}</span></template>
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control title" placeholder="请填写标题" v-model="form.field.title">
                                            <template v-if="form.error.title"><span class="text-danger" >{{form.error.title}}</span></template>
                                        </div>
                                        <div class="panel panel-default">

                                            <div class="panel-body text-left">
                                                <ul class="list-group ">
                                                    <li>请注意单词拼写，以及中英文排版，参考此页</li>
                                                    <li>支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法</li>
                                                    <li>支持表情，使用方法请见 Emoji 自动补全来咯，可用的 Emoji 请见 :metal: :point_right: Emoji 列表  :star: :sparkles:</li>
                                                    <li>上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <!-- textarea -->
                                        <div  id="topics-editormd" style="z-index: 999">
                                            <textarea style="display:none;" id="topics-editormd-markdown-doc" class="form-control" name="topics-editormd-markdown-doc">{{form.field.contentMd}}</textarea>
                                        </div>
                                        <div class="box-footer">
                                            <button type="button" class="btn btn-primary" @click="submitForm()">发布文章</button>
                                        </div>
                                    </form>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <th:block th:include="home/layout::modal" />
                        </div>
                        <div th:class="'col-md-3 pull-left' ">
                            <div class="panel panel-default">
                                <div class="panel-heading text-center">构建高品质的社区</div>
                                <div class="panel-body">
                                    <ul class="list-group list-group-unbordered">
                                        <li>请传播美好的事物，这里拒绝低俗、诋毁、谩骂等相关信息</li>
                                        <li>请尽量分享技术相关的话题，谢绝发布社会, 政治等相关新闻</li>
                                        <li>这里绝对不讨论任何有关盗版软件、音乐、电影如何获得的问题</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.container -->
            </div>
            <input type="hidden" name="id" th:value="${id}" />
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />

        <script>
            var appCreateTopics = new Vue({
                el:'#app-create-topics',
                data () {
                    return {
                        form:{
                            field:{
                                category:'',
                                title:'',
                                content:'',
                                contentMd:''
                            },
                            error:{
                                category:'',
                                title:'',
                                content:''
                            },
                            categories:''
                        },
                        dialogTitle:'',
                        dialogContent:'',
                        isSuccess:true,
                        hasError:''
                    }
                },
                created() {
                    this.getData();
                    this.getEditInfo();
                },
                methods:{
                    getData() {
                        var _this = this;
                        $.post('/topics/getCategory',null,function(response) {
                            _this.form.categories = response
                        },'json',_this);
                    },
                    getEditInfo() {
                        var _this = this;
                        var id = $('input[name="id"]').val();
                        $.post('/topics/getEditInfo',{id:id},function(response) {
                            _this.form.field = response;
                        },'json',_this);
                    },
                    submitForm() {
                        var _this = this;
                        if (!_this.form.field.category) {
                            _this.form.error.category = '请选择栏目';
                            $('html,body').animate({scrollTop:$('.category').offset().top},200);
                            $('.category').focus();
                            return false;
                        } else{
                            _this.form.error.category = '';
                        }
                        if (!_this.form.field.title) {
                            _this.form.error.title = '请输入标题';
                            $('html,body').animate({scrollTop:$('.title').offset().top},200);
                            $('.title').focus();
                            return false;
                        } else{
                            _this.form.error.title = '';
                        }
                        if (!_this.form.field.title) {
                            _this.form.error.title = '请输入标题';
                            $('html,body').animate({scrollTop:$('.title').offset().top},200);
                            $('.title').focus();
                            return false;
                        } else{
                            _this.form.error.title = '';
                        }
                        _this.form.field.content = topicsEditormd.getHTML();
                        _this.form.field.contentMd = topicsEditormd.getMarkdown();
                        $.post('/topics/create',this.form.field,function(response) {
                            _this.dialogTitle = "创建话题";
                            if (response.status === true) {
                                _this.dialogContent = "创建成功";
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                            } else {
                                _this.dialogContent = response.content;
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                            }
                        },'json',_this);

                    },

                }
            });

            var topicsEditormd;
            $(function(){
                 topicsEditormd = editormd("topics-editormd", {
                    width: "100%",
                    height: 640,
                    markdown : "",
                    path : '/editor/lib/',
                    watch:false,
                    placeholder:'输入内容，按F9可以打开实时预览',
                    saveHTMLToTextarea:true,
                    //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为 true
                    //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为 true
                    //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为 true
                    //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为 0.1
                    //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为 #fff
                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "/upload/markdown?csrfToken=" + $('meta[name="csrf-token"]').attr('content'),
                    onload: function() {

                    }

                    /*
                     上传的后台只需要返回一个 JSON 数据，结构如下：
                     {
                        success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                        message : "提示的信息，上传成功或上传失败及错误信息等。",
                        url     : "图片地址"        // 上传成功时才返回
                     }
                     */
                });
                editormd.markdownToHTML("topics-editormd-markdown-doc", {
                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                    emoji           : true,
                    taskList        : true,
                    tex             : true,  // 默认不解析
                    flowChart       : true,  // 默认不解析
                    sequenceDiagram : true,  // 默认不解析
                });
            });
        </script>
    </body>
</html>
